<template>
  <div class="permission-container">
    <!-- 标题区域 -->
    <div class="permission-header">
      <div class="header-left">
        <h1 class="page-title">角色权限管理</h1>
        <p class="page-subtitle">管理系统角色及其对应权限</p>
      </div>
    </div>
    
    <el-row :gutter="20">
      <!-- 左侧角色列表和角色信息 -->
      <el-col :span="8">
        <!-- 角色列表卡片 -->
        <el-card class="role-list-card">
          <template #header>
            <div class="card-header">
              <span>角色列表</span>
              <div class="header-actions">
                <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAddRole">新增角色</el-button>
              </div>
            </div>
          </template>
          
          <el-table 
            :data="roleList" 
            highlight-current-row
            @current-change="handleRoleSelect"
            v-loading="roleLoading"
            style="width: 100%"
          >
            <el-table-column prop="roleName" label="角色名称">
              <template #default="scope">
                <div class="role-name">
                  <i :class="getRoleIcon(scope.row.roleCode)"></i>
                  <span>{{ scope.row.roleName }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="80">
              <template #default="scope">
                <el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
                  {{ scope.row.status === 1 ? '启用' : '禁用' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="160">
              <template #default="scope">
                <el-button type="text" size="small" @click.stop="handleEditRole(scope.row)">编辑</el-button>
                <el-button 
                  type="text" 
                  size="small" 
                  @click.stop="handleDeleteRole(scope.row)"
                  :disabled="scope.row.isSystem === 1"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        
        <!-- 角色信息卡片 -->
        <el-card class="role-info-card">
          <template #header>
            <div class="card-header">
              <span>角色信息</span>
              <div class="header-actions">
                <el-button 
                  type="primary" 
                  size="small" 
                  icon="el-icon-edit" 
                  @click="handleEditCurrentRole"
                  :disabled="!currentRole"
                >修改</el-button>
              </div>
            </div>
          </template>
          
          <div v-if="currentRole" class="role-info">
            <div class="info-item">
              <span class="label">角色名称:</span>
              <span class="value">{{ currentRole.roleName }}</span>
            </div>
            <div class="info-item">
              <span class="label">角色编码:</span>
              <span class="value">{{ currentRole.roleCode }}</span>
            </div>
            <div class="info-item">
              <span class="label">角色排序:</span>
              <span class="value">{{ currentRole.roleSort }}</span>
            </div>
            <div class="info-item">
              <span class="label">创建时间:</span>
              <span class="value">{{ currentRole.createTime }}</span>
            </div>
            <div class="info-item">
              <span class="label">状态:</span>
              <span class="value">
                <el-tag :type="currentRole.status === 1 ? 'success' : 'info'">
                  {{ currentRole.status === 1 ? '启用' : '禁用' }}
                </el-tag>
              </span>
            </div>
            <div class="info-item">
              <span class="label">系统角色:</span>
              <span class="value">
                <el-tag :type="currentRole.isSystem === 1 ? 'danger' : 'info'">
                  {{ currentRole.isSystem === 1 ? '是' : '否' }}
                </el-tag>
              </span>
            </div>
            <div class="info-item full-width">
              <span class="label">备注:</span>
              <div class="value remark">{{ currentRole.remark || '暂无备注' }}</div>
            </div>
          </div>
          
          <div v-else class="no-role-selected">
            <el-empty description="请选择一个角色"></el-empty>
          </div>
        </el-card>
      </el-col>
      
      <!-- 右侧权限分配 -->
      <el-col :span="16">
        <el-card class="permission-card">
          <template #header>
            <div class="card-header">
              <span>分配权限</span>
              <div class="header-actions">
                <el-button 
                  type="primary" 
                  icon="el-icon-check" 
                  @click="savePermissions"
                  :disabled="!currentRole"
                >保存</el-button>
              </div>
            </div>
          </template>
          
          <div v-if="currentRole">
            <!-- 搜索和操作按钮 -->
            <div class="permission-tools">
              <el-input
                placeholder="搜索权限..."
                prefix-icon="el-icon-search"
                v-model="searchPermissionKeyword"
                clearable
                class="search-input"
              ></el-input>
              
              <div class="tool-buttons">
                <el-button size="small" icon="el-icon-s-unfold" @click="expandAll">展开全部</el-button>
                <el-button size="small" icon="el-icon-s-fold" @click="collapseAll">折叠全部</el-button>
                <el-button size="small" icon="el-icon-check" @click="selectAll">全选</el-button>
                <el-button size="small" icon="el-icon-close" @click="deselectAll">取消全选</el-button>
              </div>
            </div>
            
            <!-- 权限树 -->
            <div class="permission-tree-container">
              <el-tree
                ref="permissionTreeRef"
                :data="permissionTree"
                :props="defaultProps"
                node-key="id"
                show-checkbox
                default-expand-all
                highlight-current
                :filter-node-method="filterPermissionNode"
                @check="handlePermissionCheck"
              >
                <template #default="{ node, data }">
                  <div class="tree-node">
                    <i :class="getPermissionIcon(data.type)" class="permission-icon"></i>
                    <span class="permission-label">{{ node.label }}</span>
                    <span class="permission-code">{{ data.permCode }}</span>
                  </div>
                </template>
              </el-tree>
            </div>
          </div>
          
          <div v-else class="no-role-selected">
            <el-empty description="请先选择一个角色"></el-empty>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 添加/编辑角色对话框 -->
    <el-dialog
      :title="roleFormMode === 'add' ? '添加角色' : '编辑角色'"
      v-model="roleDialogVisible"
      width="500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form :model="roleForm" :rules="roleFormRules" ref="roleFormRef" label-width="80px">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="roleForm.roleName" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="角色编码" prop="roleCode">
          <el-input v-model="roleForm.roleCode" placeholder="请输入角色编码" :disabled="roleFormMode === 'edit' && roleForm.isSystem === 1" />
        </el-form-item>
        <el-form-item label="角色排序" prop="roleSort">
          <el-input-number v-model="roleForm.roleSort" :min="1" :max="999" />
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="roleForm.status" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="roleForm.remark" placeholder="请输入备注信息" :rows="3" />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="roleDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitRoleForm">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch, nextTick, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

// 角色列表相关
const roleList = ref([]);
const currentRole = ref(null);
const roleLoading = ref(false);

// 权限树相关
const permissionTree = ref([]);
const defaultProps = {
  children: 'children',
  label: 'name'
};
const permissionTreeRef = ref(null);
const searchPermissionKeyword = ref('');

// 角色表单相关
const roleDialogVisible = ref(false);
const roleFormMode = ref('add'); // 'add' or 'edit'
const roleFormRef = ref(null);
const roleForm = reactive({
  id: '',
  roleName: '',
  roleCode: '',
  roleSort: 1,
  status: 1,
  remark: '',
  isSystem: 0
});
const roleFormRules = {
  roleName: [
    { required: true, message: '请输入角色名称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  roleCode: [
    { required: true, message: '请输入角色编码', trigger: 'blur' },
    { pattern: /^[A-Z_]+$/, message: '角色编码只能包含大写字母和下划线', trigger: 'blur' }
  ],
  roleSort: [
    { required: true, message: '请输入角色排序', trigger: 'change' }
  ]
};

// 生命周期钩子
onMounted(() => {
  fetchRoleList();
  fetchPermissionTree();
});

// 监听搜索关键词变化
watch(searchPermissionKeyword, (val) => {
  if (permissionTreeRef.value) {
    permissionTreeRef.value.filter(val);
  }
});

// 获取角色列表
const fetchRoleList = () => {
  roleLoading.value = true;
  // 模拟API请求
  setTimeout(() => {
    roleList.value = [
      { 
        id: 1, 
        roleName: '超级管理员', 
        roleCode: 'SUPER_ADMIN', 
        roleSort: 1, 
        status: 1,
        isSystem: 1,
        createTime: '2023-01-01 00:00:00',
        remark: '系统内置超级管理员，拥有所有权限，不可删除'
      },
      { 
        id: 2, 
        roleName: '系统管理员', 
        roleCode: 'SYSTEM_ADMIN', 
        roleSort: 2, 
        status: 1,
        isSystem: 1,
        createTime: '2023-01-01 00:00:00',
        remark: '系统管理员，拥有除超级管理员外的所有权限'
      },
      { 
        id: 3, 
        roleName: '内容管理员', 
        roleCode: 'CONTENT_ADMIN', 
        roleSort: 3, 
        status: 1,
        isSystem: 0,
        createTime: '2023-01-01 00:00:00',
        remark: '内容管理员，负责系统内容的管理和维护'
      },
      { 
        id: 4, 
        roleName: '运维人员', 
        roleCode: 'OPS', 
        roleSort: 4, 
        status: 1,
        isSystem: 0,
        createTime: '2023-01-01 00:00:00',
        remark: '运维人员，负责系统的运行维护'
      },
      { 
        id: 5, 
        roleName: '普通用户', 
        roleCode: 'USER', 
        roleSort: 5, 
        status: 1,
        isSystem: 1,
        createTime: '2023-01-01 00:00:00',
        remark: '普通用户，拥有基本的系统访问权限'
      },
      { 
        id: 6, 
        roleName: '访客', 
        roleCode: 'VISITOR', 
        roleSort: 6, 
        status: 0,
        isSystem: 1,
        createTime: '2023-01-01 00:00:00',
        remark: '访客，只有查看权限'
      }
    ];
    roleLoading.value = false;
  }, 500);
};

// 获取权限树
const fetchPermissionTree = () => {
  // 模拟API请求
  setTimeout(() => {
    permissionTree.value = [
      {
        id: 1,
        name: '系统管理',
        permCode: 'system',
        type: 'menu',
        children: [
          {
            id: 11,
            name: '用户管理',
            permCode: 'system:user',
            type: 'menu',
            children: [
              { id: 111, name: '用户查询', permCode: 'system:user:list', type: 'permission' },
              { id: 112, name: '用户新增', permCode: 'system:user:add', type: 'permission' },
              { id: 113, name: '用户修改', permCode: 'system:user:edit', type: 'permission' },
              { id: 114, name: '用户删除', permCode: 'system:user:delete', type: 'permission' },
              { id: 115, name: '用户导出', permCode: 'system:user:export', type: 'permission' },
              { id: 116, name: '用户导入', permCode: 'system:user:import', type: 'permission' },
              { id: 117, name: '重置密码', permCode: 'system:user:resetPwd', type: 'permission' }
            ]
          },
          {
            id: 12,
            name: '角色管理',
            permCode: 'system:role',
            type: 'menu',
            children: [
              { id: 121, name: '角色查询', permCode: 'system:role:list', type: 'permission' },
              { id: 122, name: '角色新增', permCode: 'system:role:add', type: 'permission' },
              { id: 123, name: '角色修改', permCode: 'system:role:edit', type: 'permission' },
              { id: 124, name: '角色删除', permCode: 'system:role:delete', type: 'permission' },
              { id: 125, name: '角色导出', permCode: 'system:role:export', type: 'permission' }
            ]
          },
          {
            id: 13,
            name: '菜单管理',
            permCode: 'system:menu',
            type: 'menu',
            children: [
              { id: 131, name: '菜单查询', permCode: 'system:menu:list', type: 'permission' },
              { id: 132, name: '菜单新增', permCode: 'system:menu:add', type: 'permission' },
              { id: 133, name: '菜单修改', permCode: 'system:menu:edit', type: 'permission' },
              { id: 134, name: '菜单删除', permCode: 'system:menu:delete', type: 'permission' }
            ]
          },
          {
            id: 14,
            name: '部门管理',
            permCode: 'system:dept',
            type: 'menu',
            children: [
              { id: 141, name: '部门查询', permCode: 'system:dept:list', type: 'permission' },
              { id: 142, name: '部门新增', permCode: 'system:dept:add', type: 'permission' },
              { id: 143, name: '部门修改', permCode: 'system:dept:edit', type: 'permission' },
              { id: 144, name: '部门删除', permCode: 'system:dept:delete', type: 'permission' },
              {
                id: 15,
                name: '系统设置',
                permCode: 'system:config',
                type: 'menu',
                children: [
                  { id: 151, name: '参数查询', permCode: 'system:config:list', type: 'permission' },
                  { id: 152, name: '参数新增', permCode: 'system:config:add', type: 'permission' },
                  { id: 153, name: '参数修改', permCode: 'system:config:edit', type: 'permission' },
                  { id: 154, name: '参数删除', permCode: 'system:config:delete', type: 'permission' },
                  { id: 155, name: '缓存管理', permCode: 'system:config:cache', type: 'permission' }
                ]
              },
              {
                id: 16,
                name: '通知公告',
                permCode: 'system:notice',
                type: 'menu',
                children: [
                  { id: 161, name: '公告查询', permCode: 'system:notice:list', type: 'permission' },
                  { id: 162, name: '公告新增', permCode: 'system:notice:add', type: 'permission' },
                  { id: 163, name: '公告修改', permCode: 'system:notice:edit', type: 'permission' },
                  { id: 164, name: '公告删除', permCode: 'system:notice:remove', type: 'permission' },
                  { id: 165, name: '公告发布', permCode: 'system:notice:publish', type: 'permission' },
                  { id: 166, name: '公告查看', permCode: 'system:notice:query', type: 'permission' }
                ]
              }
            ]
          },
          {
            id: 17,
            name: '个人中心',
            permCode: 'profile',
            type: 'menu',
            children: [
              { id: 171, name: '基本资料', permCode: 'profile:info', type: 'permission' },
              { id: 172, name: '修改密码', permCode: 'profile:password', type: 'permission' },
              { id: 173, name: '账号设置', permCode: 'profile:settings', type: 'permission' }
            ]
          }
        ]
      },
      {
        id: 2,
        name: '系统监控',
        permCode: 'monitor',
        type: 'menu',
        children: [
          {
            id: 21,
            name: '在线用户',
            permCode: 'monitor:online',
            type: 'menu',
            children: [
              { id: 211, name: '在线查询', permCode: 'monitor:online:list', type: 'permission' },
              { id: 212, name: '批量强退', permCode: 'monitor:online:batchForceLogout', type: 'permission' },
              { id: 213, name: '单条强退', permCode: 'monitor:online:forceLogout', type: 'permission' }
            ]
          },
          {
            id: 22,
            name: '定时任务',
            permCode: 'monitor:job',
            type: 'menu',
            children: [
              { id: 221, name: '任务查询', permCode: 'monitor:job:list', type: 'permission' },
              { id: 222, name: '任务新增', permCode: 'monitor:job:add', type: 'permission' },
              { id: 223, name: '任务修改', permCode: 'monitor:job:edit', type: 'permission' },
              { id: 224, name: '任务删除', permCode: 'monitor:job:remove', type: 'permission' },
              { id: 225, name: '状态修改', permCode: 'monitor:job:changeStatus', type: 'permission' },
              { id: 226, name: '任务导出', permCode: 'monitor:job:export', type: 'permission' },
              { id: 227, name: '任务查看', permCode: 'monitor:job:query', type: 'permission' }
            ]
          },
          {
            id: 23,
            name: '服务监控',
            permCode: 'monitor:server',
            type: 'menu',
            children: [
              { id: 231, name: '服务查询', permCode: 'monitor:server:info', type: 'permission' }
            ]
          }
        ]
      },
      {
        id: 3,
        name: '系统工具',
        permCode: 'tool',
        type: 'menu',
        children: [
          {
            id: 31,
            name: '代码生成',
            permCode: 'tool:gen',
            type: 'menu',
            children: [
              { id: 311, name: '生成查询', permCode: 'tool:gen:list', type: 'permission' },
              { id: 312, name: '生成修改', permCode: 'tool:gen:edit', type: 'permission' },
              { id: 313, name: '生成删除', permCode: 'tool:gen:remove', type: 'permission' },
              { id: 314, name: '预览代码', permCode: 'tool:gen:preview', type: 'permission' },
              { id: 315, name: '生成代码', permCode: 'tool:gen:code', type: 'permission' }
            ]
          },
          {
            id: 32,
            name: '系统接口',
            permCode: 'tool:swagger',
            type: 'menu',
            children: [
              { id: 321, name: '接口文档', permCode: 'tool:swagger:view', type: 'permission' }
            ]
          }
        ]
      }
    ];
  }, 500);
};

// 获取角色图标
const getRoleIcon = (roleCode) => {
  const iconMap = {
    'SUPER_ADMIN': 'el-icon-user-solid',
    'SYSTEM_ADMIN': 'el-icon-s-tools',
    'CONTENT_ADMIN': 'el-icon-edit',
    'OPS': 'el-icon-s-operation',
    'USER': 'el-icon-user',
    'VISITOR': 'el-icon-coordinate'
  };
  return iconMap[roleCode] || 'el-icon-user';
};

// 获取权限图标
const getPermissionIcon = (type) => {
  const iconMap = {
    'menu': 'el-icon-menu',
    'permission': 'el-icon-key'
  };
  return iconMap[type] || 'el-icon-document';
};

// 过滤权限节点
const filterPermissionNode = (value, data) => {
  if (!value) return true;
  return data.name.indexOf(value) !== -1 || data.permCode.indexOf(value) !== -1;
};

// 处理角色选择
const handleRoleSelect = (role) => {
  if (!role) return;
  currentRole.value = role;
  
  // 在实际应用中，应该根据选中的角色加载对应的权限
  nextTick(() => {
    if (permissionTreeRef.value) {
      // 模拟加载角色权限
      if (role.roleCode === 'SUPER_ADMIN') {
        // 超级管理员拥有所有权限
        permissionTreeRef.value.setCheckedNodes(permissionTree.value);
      } else if (role.roleCode === 'SYSTEM_ADMIN') {
        // 系统管理员拥有部分权限
        permissionTreeRef.value.setCheckedKeys([1, 11, 12, 13, 14, 111, 112, 113, 121, 122, 123, 131, 132, 133, 141, 142, 143]);
      } else if (role.roleCode === 'CONTENT_ADMIN') {
        // 内容管理员拥有内容相关权限
        permissionTreeRef.value.setCheckedKeys([]);
      } else {
        // 其他角色默认没有权限
        permissionTreeRef.value.setCheckedKeys([]);
      }
    }
  });
};

// 处理权限选中变化
const handlePermissionCheck = () => {
  console.log('选中的权限:', permissionTreeRef.value.getCheckedKeys());
  console.log('半选中的权限:', permissionTreeRef.value.getHalfCheckedKeys());
};

// 展开全部
const expandAll = () => {
  expandTreeNodes(permissionTreeRef.value, true);
};

// 折叠全部
const collapseAll = () => {
  expandTreeNodes(permissionTreeRef.value, false);
};

// 展开或折叠树节点
const expandTreeNodes = (tree, expand) => {
  if (!tree || !tree.data) return;
  tree.data.forEach(node => {
    if(tree.store && tree.store.nodesMap && tree.store.nodesMap[node.id]) {
      tree.store.nodesMap[node.id].expanded = expand;
    }
  });
};

// 全选
const selectAll = () => {
  permissionTreeRef.value.setCheckedNodes(permissionTree.value.data);
};

// 取消全选
const deselectAll = () => {
  permissionTreeRef.value.setCheckedKeys([]);
};

// 保存权限
const savePermissions = () => {
  if (!currentRole.value) return;
  
  const checkedKeys = permissionTreeRef.value.getCheckedKeys();
  const halfCheckedKeys = permissionTreeRef.value.getHalfCheckedKeys();
  const allKeys = [...checkedKeys, ...halfCheckedKeys];
  
  console.log('保存角色权限:', {
    roleId: currentRole.value.id,
    permissions: allKeys
  });
  
  // 模拟API请求
  ElMessage({
    message: '权限保存成功',
    type: 'success'
  });
};

// 添加角色
const handleAddRole = () => {
  roleFormMode.value = 'add';
  resetRoleForm();
  roleDialogVisible.value = true;
};

// 编辑角色
const handleEditRole = (role) => {
  roleFormMode.value = 'edit';
  resetRoleForm();
  Object.assign(roleForm, role);
  roleDialogVisible.value = true;
};

// 编辑当前角色
const handleEditCurrentRole = () => {
  if (!currentRole.value) return;
  handleEditRole(currentRole.value);
};

// 删除角色
const handleDeleteRole = (role) => {
  if (role.isSystem === 1) {
    ElMessage.warning('系统角色不能删除');
    return;
  }
  
  ElMessageBox.confirm(`确定要删除角色"${role.roleName}"吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 模拟API请求
    roleList.value = roleList.value.filter(item => item.id !== role.id);
    
    // 如果删除的是当前选中的角色，清空当前角色
    if (currentRole.value && currentRole.value.id === role.id) {
      currentRole.value = null;
    }
    
    ElMessage({
      message: '删除成功',
      type: 'success'
    });
  }).catch(() => {});
};

// 重置角色表单
const resetRoleForm = () => {
  if (roleFormRef.value) {
    roleFormRef.value.resetFields();
  }
  roleForm.id = '';
  roleForm.roleName = '';
  roleForm.roleCode = '';
  roleForm.roleSort = 1;
  roleForm.status = 1;
  roleForm.remark = '';
  roleForm.isSystem = 0;
};

// 提交角色表单
const submitRoleForm = () => {
  roleFormRef.value.validate((valid) => {
    if (valid) {
      if (roleFormMode.value === 'add') {
        // 添加角色
        const newRole = {
          ...roleForm,
          id: Date.now(),
          createTime: new Date().toISOString().replace('T', ' ').substring(0, 19)
        };
        roleList.value.push(newRole);
        
        ElMessage({
          message: '添加成功',
          type: 'success'
        });
      } else {
        // 编辑角色
        const index = roleList.value.findIndex(item => item.id === roleForm.id);
        if (index !== -1) {
          roleList.value[index] = { ...roleList.value[index], ...roleForm };
          
          // 如果修改的是当前选中的角色，更新当前角色
          if (currentRole.value && currentRole.value.id === roleForm.id) {
            currentRole.value = roleList.value[index];
          }
          
          ElMessage({
            message: '修改成功',
            type: 'success'
          });
        }
      }
      
      roleDialogVisible.value = false;
    }
  });
};
</script>

<style scoped>
.permission-container {
  padding: 20px;
}

/* 标题区域 */
.permission-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: var(--dark-color);
}

.page-subtitle {
  color: #666;
  margin: 5px 0 0;
}

/* 卡片样式 */
.role-list-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

/* 角色列表样式 */
.role-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.role-name i {
  font-size: 16px;
  color: var(--primary-color);
}

/* 角色信息样式 */
.role-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
}

.info-item .label {
  font-weight: 500;
  width: 80px;
  flex-shrink: 0;
  color: #606266;
}

.info-item .value {
  color: #333;
}

.info-item.full-width {
  flex-direction: column;
}

.info-item .remark {
  margin-top: 5px;
  background: #f8f8f8;
  padding: 8px;
  border-radius: 4px;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.no-role-selected {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

/* 权限树样式 */
.permission-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 15px;
  flex-wrap: wrap;
}

.search-input {
  width: 300px;
}

.tool-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.permission-tree-container {
  max-height: 600px;
  overflow-y: auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 10px;
}

.tree-node {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.permission-icon {
  margin-right: 8px;
  font-size: 16px;
}

.permission-label {
  margin-right: 10px;
}

.permission-code {
  color: #909399;
  font-size: 12px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .permission-tools {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .search-input {
    width: 100%;
  }
  
  .tool-buttons {
    width: 100%;
    justify-content: flex-start;
    margin-top: 10px;
  }
}
</style> 